<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getEmailList, deleteEmail } from '@/api/email.js'

// 邮件列表数据
const emails = ref([])

// 控制详情弹窗的显示
const dialogVisible = ref(false)
// 当前选中的邮件数据
const currentEmail = ref({})

// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 监听页码变化
watch(currentPage, (newVal) => {
    console.log('页码变化:', newVal)
    loadEmailList()
})

// 监听每页条数变化
watch(pageSize, (newVal) => {
    console.log('每页条数变化:', newVal)
    currentPage.value = 1  // 重置为第一页
    loadEmailList()
})

// 显示邮件详情
const showEmailDetail = (row) => {
    currentEmail.value = row
    dialogVisible.value = true
}

// 获取邮件列表数据
const loadEmailList = async () => {
    try {
        console.log('开始加载数据, 页码:', currentPage.value, '每页条数:', pageSize.value)
        const result = await getEmailList({
            page: currentPage.value,
            pageSize: pageSize.value
        })
        if (result.status === 'success') {
            emails.value = result.emails
            total.value = result.total || 0
            console.log('数据加载成功:', result.emails.length, '条数据')
        } else {
            ElMessage.error(result.message || '获取邮件列表失败')
        }
    } catch (error) {
        ElMessage.error('获取邮件列表失败')
        console.error('加载数据失败:', error)
    }
}

// 处理页码改变
const handleCurrentChange = (val) => {
    console.log('handleCurrentChange 触发:', val)
    currentPage.value = val
}

// 处理每页条数改变
const handleSizeChange = (val) => {
    console.log('handleSizeChange 触发:', val)
    pageSize.value = val
}

// 删除邮件
const handleDelete = async (row) => {
    try {
        await ElMessageBox.confirm(
            '确认要删除这封邮件吗？',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )

        const res = await deleteEmail(row.id)
        if (res.status === 'success') {
            // 先显示成功消息
            ElMessage.success(res.message || '删除成功')
            // 然后重新加载列表
            await loadEmailList()
        } else {
            ElMessage.error(res.message || '删除失败')
        }
    } catch (error) {
        // 只有当错误不是用户取消操作时才显示错误消息
        if (error !== 'cancel') {
            ElMessage.error('删除失败：' + (error.message || '未知错误'))
        }
    }
}

// 在操作列中使用这些方法
const handleDeleteClick = (row) => {
    handleDelete(row)
}

// 在组件挂载时加载数据
onMounted(() => {
    loadEmailList()
})
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>数据集</span>
            </div>
        </template>
        <el-table :data="emails" style="width: 100%" @row-click="showEmailDetail">
            <el-table-column label="ID" prop="id" width="80"></el-table-column>
            <el-table-column label="内容" prop="content">
                <template #default="{ row }">
                    <div class="content-cell">{{ row.content }}</div>
                </template>
            </el-table-column>
            <el-table-column label="分类" prop="status" width="100">
                <template #default="{ row }">
                    <el-tag :type="row.status === '0' ? 'success' : 'info'">
                        {{ row.status === '1' ? '正常' : '垃圾' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="是否删除" prop="isdeleted" width="100">
                <template #default="{ row }">
                    <el-tag :type="row.isdeleted === '0' ? 'success' : 'danger'">
                        {{ row.isdeleted === true ? '未删除' : '已删除' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="{ row }">
                    <el-button :icon="Delete" circle plain type="danger"
                        @click.stop="handleDeleteClick(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <!-- 修改分页组件 -->
        <div class="pagination-container">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                background
            />
        </div>

        <!-- 邮件详情弹窗 -->
        <el-dialog v-model="dialogVisible" title="邮件详情" width="1200px" :close-on-click-modal="false">
            <div class="email-detail">
                <div class="detail-header">
                    <div class="detail-item">
                        <span class="label">ID：</span>
                        <span>{{ currentEmail.id }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">分类：</span>
                        <span>{{ currentEmail.category || '无' }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">状态：</span>
                        <el-tag :type="currentEmail.status === '0' ? 'success' : 'info'">
                            {{ currentEmail.status === '1' ? '正常' : '垃圾' }}
                        </el-tag>
                    </div>
                    <div class="detail-item">
                        <span class="label">是否删除：</span>
                        <el-tag :type="currentEmail.isdeleted === '0' ? 'success' : 'danger'">
                            {{ currentEmail.isdeleted === true ? '未删除' : '已删除' }}
                        </el-tag>
                    </div>
                </div>
                
                <div class="content-comparison">
                    <div class="content-section">
                        <div class="section-title">原始内容</div>
                        <div class="content-box">{{ currentEmail.content }}</div>
                    </div>
                    <div class="content-divider"></div>
                    <div class="content-section">
                        <div class="section-title">处理后内容</div>
                        <div class="content-box">{{ currentEmail.processed_content }}</div>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.email-detail {
    .detail-header {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 24px;
        padding: 16px;
        background: #f8f9fa;
        border-radius: 8px;

        .detail-item {
            display: flex;
            align-items: center;
            
            .label {
                font-weight: bold;
                color: #606266;
                margin-right: 8px;
            }
        }
    }

    .content-comparison {
        display: flex;
        gap: 24px;
        height: 500px;

        .content-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            
            .section-title {
                font-size: 16px;
                font-weight: bold;
                color: #303133;
                margin-bottom: 12px;
                padding-left: 8px;
                border-left: 4px solid #409EFF;
            }

            .content-box {
                flex: 1;
                padding: 16px;
                background: #fff;
                border: 1px solid #e4e7ed;
                border-radius: 8px;
                overflow-y: auto;
                line-height: 1.6;
                font-size: 14px;
                white-space: pre-wrap;
                word-break: break-word;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #c0c4cc;
                    border-radius: 3px;
                }

                &::-webkit-scrollbar-track {
                    background: #f4f4f5;
                }
            }
        }

        .content-divider {
            width: 1px;
            background: #dcdfe6;
            margin: 0 12px;
        }
    }
}

.dialog-footer {
    text-align: right;
    padding-top: 20px;
}

:deep(.el-dialog) {
    @media screen and (max-width: 768px) {
        width: 95% !important;
    }

    .el-dialog__body {
        padding: 20px;
    }
}

.content-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 显示2行 */
    -webkit-box-orient: vertical;
    line-height: 1.5;
    max-height: 3em;
    /* 2行的高度 */
    word-break: break-word;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
}
</style>